<template>
	<div id="cxdw_blx" :style="{ height: '400px', width: '100%' }"></div>
</template>

<script setup>
	import * as echarts from 'echarts';
	import { onMounted, onUnmounted, watch, ref, reactive } from 'vue';
	const props = defineProps({
		xdata: {
			type: Array,
			default: [],
		},
		ydata: {
			type: Array,
			default: [],
		},
		title: {
			type: String,
			default: '',
		},
	});

	let myChart = null;
	let xAxisData=[];
	let yAxisData1=[]; 
	const initOption = function () {
		let option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow',
				},
			},
			toolbox:{
				feature:{
					saveAsImage:{
						name: props.title||'统计图表'
					}
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true,
			},
			xAxis: [
				{
					type: 'category',
					data: xAxisData,
					axisTick: {
						alignWithLabel: true,
					},
					axisLabel: {
						textStyle: {
							color: '#86909C',
						},
						rotate: 30,
					},
				},
			],
			yAxis: [
				{
					axisLine: {
						show: false,
						lineStyle: {
							color: '#86909C',
						},
					},
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed',
							color: 'rgba(135,140,147,0.8)',
						},
					},
					type: 'value',
				},
			],
			series: [
				{
					name: '用时（分钟）',
					type: 'line',
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
                    cursor: "pointer",
					data: yAxisData1,
					lineStyle: {
						normal: {
							color: '#4EADFF',
							shadowBlur: 5,
							shadowColor: '#4EADFF33',
							shadowOffsetY: 10,
						},
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color: '#117EFF55',
									},
									{
										offset: 1,
										color: '#117EFF11',
									},
								],
								false
							),
							shadowColor: '#165DFF22',
							shadowBlur: 10,
						},
					},
					label: {
						normal: {
							show: true,
							position: 'top',
							distance: 8 ,
							formatter: function (params) {
								return params.data.value;
							},
							textStyle: {
								color: '#1D2129',
								fontSize: 14,
								fontWeight: 700
							},
						},
					},
				},
			],
		};
		return option;
	};

	const initEchart = function () {
		const options = initOption();
		let chartDom = document.getElementById('cxdw_blx');
		if (chartDom) {
			let myChart = echarts.init(chartDom);
			myChart.setOption(options);
		}
	};
	watch(
		() => props.ydata,
		() => {
			xAxisData = props.xdata;
			yAxisData1 = props.ydata;
			// xAxisData = ['物业服务中心', '雁塔动力服务中心', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
			// yAxisData1 = [100, 138, 350, 173, 180, 150, 180, 230, 180, 150, 180, 230];
			initEchart();
		},
		{
			immediate: true,
		}
	);
	onMounted(() => {
		initEchart();
	});
	onUnmounted(() => {
		destroyChart();
	});
	const destroyChart = function () {
		if (myChart) {
			myChart.dispose();
			myChart = null;
		}
	};
</script>
